<template>
    <div>
        <!-- 添加 -->
        <el-form ref="form" :model="form" label-width="80px">
            <el-row>
                <el-col :span="3">
                    <el-select v-model="form.partner" placeholder="请选择所属合作方">
                        <el-option label="意泰物联" value="意泰物联"></el-option>
                        <el-option label="小鱼到家" value="小鱼到家"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="form.status" placeholder="请选择设备状态">
                        <el-option label="正常" value="正常"></el-option>
                        <el-option label="异常" value="异常"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                    <el-select v-model="form.activity" placeholder="请选择活动状态">
                        <el-option label="活动中" value="活动中"></el-option>
                        <el-option label="非活动" value="非活动"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="3">
                  <el-input v-model="form.coding" placeholder="请填写设备编码"></el-input>
                </el-col>
                <el-col :span="1">
                    <el-button type="primary" size="small">搜索</el-button>
                </el-col>
                <el-col :span="3">
                     <el-button type="success" size="small">添加</el-button>
                     <el-button type="success" size="small">导出</el-button>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格 -->
        <el-table :data="tableData" height="500" border style="width: 100%">
            <el-table-column prop="coding" label="设备编码" width="180">
            </el-table-column>
            <el-table-column prop="partner" label="所在合作方" width="180">
            </el-table-column>
            <el-table-column prop="device" label="设备地址">
            </el-table-column>
            <el-table-column prop="location" label="设备位置">
            </el-table-column>
            <el-table-column prop="status" label="设备状态">
            </el-table-column>
            <el-table-column prop="num" label="设置榨汁量">
            </el-table-column>
            <el-table-column prop="activity" label="活动状态">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="dialogVisible = true,handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="修改" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-form>
                <el-form-item>
                    <el-input v-model="Editdata.coding" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="Editdata.partner" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="Editdata.device" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="Editdata.location" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="Editdata.status" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="Editdata.num" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="Editdata.activity" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        },
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        },
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        },
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        },
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        },
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        },
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        },
        {
          coding: "WE142018050003",
          partner: "北京意泰物联",
          device: "北京市朝阳区",
          location: "酒仙桥牡丹集团",
          status: "正常",
          num: "3",
          activity: "非活动"
        }
      ],
      form: {
        partner: "",
        status: "",
        activity: "",
        date2: "",
        coding:''
      },
      Editdata: []
    };
  },
  methods: {
    // 编辑按钮
    handleEdit(index, row) {
      console.log(index, row);
      this.Editdata = this.tableData[index];
    },
    // 删除按钮
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm("确认删除？")
        .then(_ => {
          done();
        })
        .catch(_ => {
          this.tableData.splice(index, 1);
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    }
  }
};
</script>
<style scoped>
.el-col {
    margin: 0 20px;
}
.el-row{
    margin-bottom:20px ;
}
</style>

